iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

用vue.js寫出一個實用的科內分享網站系列 第 13

Day13 vue.js實現簡單的註冊功能ep1

  • 分享至 

  • xImage
  •  

延續昨日
今天先把註冊的頁面也做成和登入一樣
讓想壞壞的人不能透過router進入
https://ithelp.ithome.com.tw/upload/images/20210925/20141007N483CrYixS.png
再來就是讓註冊頁能夠成功新增資料
首先我們要做的是記得在終端機下指令
json-server --watch db.json
這樣資料庫才能使用
再來打開postman之前沒有介紹postman 今天來介紹一下
(參考文章 https://tw.alphacamp.co/blog/postman-api-tutorial-for-beginners)
簡單來講postman的其中一個功能是可以讓我們快速的測試這個api的各項功能(get put delete post等等)
那我們就來測試看看我們的api
如果你們下的指令跟我一樣你們的api網址應該也是長這樣http://localhost:3000
在來接上參數users
http://localhost:3000/users
可以看到
https://ithelp.ithome.com.tw/upload/images/20210925/20141007xq4UB9QtyT.png

再來把選項get改成post(因為我們要新增資料上去)
然後在body 輸入要賦予的https://ithelp.ithome.com.tw/upload/images/20210925/201410076I3lXPY2aq.png值 將資料型別改成json格式 然後按下send
https://ithelp.ithome.com.tw/upload/images/20210925/201410079fhjJZlrnr.png

重新get後發現 嘟嘟嚕 成功新增資料了馬上回網頁測試https://ithelp.ithome.com.tw/upload/images/20210925/20141007VlnWtqe1h9.png

https://ithelp.ithome.com.tw/upload/images/20210925/20141007vjjv1NuNN6.png
https://ithelp.ithome.com.tw/upload/images/20210925/20141007Gkj7vnfpGE.png

(不過名字變成大寫了 之後來研究一下為什麼變成大寫)
再來就是把註冊給搞定
這是我們目前的註冊頁(記得要先清除session才可以看到不然網頁會判定你已經登入)
p.s.點選網頁右鍵檢查 application session 點選clear all 就可以清除 不然關掉網站重開也可以XD
https://ithelp.ithome.com.tw/upload/images/20210925/201410073Ttaj64yCs.png

這是我們註冊頁的code https://ithelp.ithome.com.tw/upload/images/20210925/20141007OsemXQJd1s.png
https://ithelp.ithome.com.tw/upload/images/20210925/20141007llbc3t2IWO.png

在data裡面新增資料(這些資料被註冊的v-model綁住 所以接的到值)
export default {

data(){
  return{

    showPassword:false,
    useraccount:'',
    userpassword:'',
    username:'',
    useremail:'',
    
  }
},

在function 裡面新增一個叫signup的function

async signup(){
let result = await axios.post("http://localhost:3000/users",{
id:this.useraccount,
password:this.userpassword,
email:this.useremail,
username:this.username
})
console.warn(result);
}

再來就是回到網頁測試並看一下console.log
https://ithelp.ithome.com.tw/upload/images/20210925/20141007qAhjPXKqtv.png

成功post 上去了 再來看一下postmanhttps://ithelp.ithome.com.tw/upload/images/20210925/201410077q6Pw9zcnK.png

也成功 看來今天就到這邊ORZ
今天已經很棒了
明天預計把註冊功能完善
我們明天見!


上一篇
Day12不可以壞壞!vue.js判斷是否session
下一篇
Day14 vue.js註冊驗證帳號是否重複ep2
系列文
用vue.js寫出一個實用的科內分享網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言